<template>
  <view class="trust-interaction-layer">
    <!-- 主要操作按钮 -->
    <view class="main-actions">
      <button 
        class="action-btn primary" 
        :class="{ disabled: !canPerformAction }"
        @click="handlePrimaryAction"
        :disabled="!canPerformAction"
      >
        <text class="btn-icon">{{ getPrimaryActionIcon() }}</text>
        <text class="btn-text">{{ getPrimaryActionText() }}</text>
      </button>
      
      <button 
        class="action-btn secondary" 
        @click="handleSecondaryAction"
        v-if="showSecondaryAction"
      >
        <text class="btn-icon">{{ getSecondaryActionIcon() }}</text>
        <text class="btn-text">{{ getSecondaryActionText() }}</text>
      </button>
    </view>
    
    <!-- 快速操作 -->
    <view class="quick-actions" v-if="showQuickActions">
      <button 
        class="quick-btn" 
        v-for="action in quickActions" 
        :key="action.id"
        :class="{ active: selectedQuickAction === action.id }"
        @click="selectQuickAction(action.id)"
      >
        <text class="quick-icon">{{ action.icon }}</text>
        <text class="quick-text">{{ action.name }}</text>
      </button>
    </view>
    
    <!-- 信任操作提示 -->
    <view class="trust-tips" v-if="showTips">
      <view class="tip-item" v-for="tip in trustTips" :key="tip.id">
        <text class="tip-icon">{{ tip.icon }}</text>
        <text class="tip-text">{{ tip.text }}</text>
      </view>
    </view>
    
    <!-- 操作确认弹窗 -->
    <view class="action-confirm-modal" v-if="showConfirmModal" @click="closeConfirmModal">
      <view class="modal-content" @click.stop>
        <view class="modal-header">
          <text class="modal-title">确认操作</text>
          <button class="close-btn" @click="closeConfirmModal">×</button>
        </view>
        
        <view class="modal-body">
          <text class="confirm-text">{{ confirmText }}</text>
          <view class="trust-impact">
            <text class="impact-label">信任影响</text>
            <text class="impact-value" :class="pendingAction.trustChange > 0 ? 'positive' : 'negative'">
              {{ pendingAction.trustChange > 0 ? '+' : '' }}{{ pendingAction.trustChange }}
            </text>
          </view>
        </view>
        
        <view class="modal-footer">
          <button class="confirm-btn cancel" @click="closeConfirmModal">取消</button>
          <button class="confirm-btn confirm" @click="executePendingAction">确认</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'TrustInteractionLayer',
  props: {
    cardData: {
      type: Object,
      required: true
    },
    trustValue: {
      type: Number,
      default: 50
    },
    showQuickActions: {
      type: Boolean,
      default: true
    },
    showTips: {
      type: Boolean,
      default: true
    }
  },
  
  data() {
    return {
      selectedQuickAction: null,
      showConfirmModal: false,
      pendingAction: null
    }
  },
  
  computed: {
    canPerformAction() {
      return this.trustValue > 0
    },
    
    showSecondaryAction() {
      return this.trustValue < 50
    },
    
    quickActions() {
      const actions = []
      
      if (this.trustValue >= 60) {
        actions.push({
          id: 'cooperation',
          name: '协作',
          icon: '🤝'
        })
      }
      
      if (this.trustValue >= 40) {
        actions.push({
          id: 'support',
          name: '支援',
          icon: '💪'
        })
      }
      
      if (this.trustValue <= 30) {
        actions.push({
          id: 'repair',
          name: '修复',
          icon: '🔧'
        })
      }
      
      if (this.trustValue <= 20) {
        actions.push({
          id: 'forgiveness',
          name: '宽恕',
          icon: '🙏'
        })
      }
      
      return actions
    },
    
    trustTips() {
      const tips = []
      
      if (this.trustValue >= 80) {
        tips.push({
          id: 'maintain',
          icon: '💎',
          text: '保持高度信任，继续合作'
        })
      } else if (this.trustValue >= 50) {
        tips.push({
          id: 'improve',
          icon: '📈',
          text: '通过更多合作提升信任'
        })
      } else if (this.trustValue >= 20) {
        tips.push({
          id: 'repair',
          icon: '🔧',
          text: '需要积极修复信任关系'
        })
      } else {
        tips.push({
          id: 'urgent',
          icon: '🚨',
          text: '信任关系危急，需要立即修复'
        })
      }
      
      return tips
    },
    
    confirmText() {
      if (!this.pendingAction) return ''
      
      const actionTexts = {
        cooperation: '确定要进行协作吗？这将提升信任值。',
        betrayal: '确定要背叛吗？这将大幅降低信任值。',
        repair: '确定要修复信任关系吗？',
        forgiveness: '确定要宽恕吗？这将修复信任关系。'
      }
      
      return actionTexts[this.pendingAction.type] || '确定要执行此操作吗？'
    }
  },
  
  methods: {
    getPrimaryActionText() {
      if (this.trustValue >= 80) return '深度合作'
      if (this.trustValue >= 50) return '建立合作'
      if (this.trustValue >= 20) return '谨慎合作'
      return '修复信任'
    },
    
    getPrimaryActionIcon() {
      if (this.trustValue >= 80) return '💎'
      if (this.trustValue >= 50) return '🤝'
      if (this.trustValue >= 20) return '⚠️'
      return '🔧'
    },
    
    getSecondaryActionText() {
      if (this.trustValue < 30) return '紧急修复'
      return '信任建议'
    },
    
    getSecondaryActionIcon() {
      if (this.trustValue < 30) return '🚨'
      return '💡'
    },
    
    handlePrimaryAction() {
      if (!this.canPerformAction) return
      
      let actionType = 'cooperation'
      let trustChange = 15
      
      if (this.trustValue >= 80) {
        actionType = 'deep_cooperation'
        trustChange = 20
      } else if (this.trustValue >= 50) {
        actionType = 'cooperation'
        trustChange = 15
      } else if (this.trustValue >= 20) {
        actionType = 'cautious_cooperation'
        trustChange = 10
      } else {
        actionType = 'repair'
        trustChange = 30
      }
      
      this.showActionConfirm({
        type: actionType,
        trustChange,
        description: this.getPrimaryActionText()
      })
    },
    
    handleSecondaryAction() {
      if (this.trustValue < 30) {
        this.showActionConfirm({
          type: 'emergency_repair',
          trustChange: 40,
          description: '紧急修复信任关系'
        })
      } else {
        this.$emit('show-trust-suggestions', {
          cardId: this.cardData.id,
          trustValue: this.trustValue
        })
      }
    },
    
    selectQuickAction(actionId) {
      this.selectedQuickAction = actionId
      
      const actionMap = {
        cooperation: { type: 'cooperation', trustChange: 15 },
        support: { type: 'support', trustChange: 10 },
        repair: { type: 'repair', trustChange: 25 },
        forgiveness: { type: 'forgiveness', trustChange: 20 }
      }
      
      const action = actionMap[actionId]
      if (action) {
        this.showActionConfirm({
          ...action,
          description: this.quickActions.find(a => a.id === actionId)?.name || '操作'
        })
      }
    },
    
    showActionConfirm(action) {
      this.pendingAction = action
      this.showConfirmModal = true
    },
    
    closeConfirmModal() {
      this.showConfirmModal = false
      this.pendingAction = null
    },
    
    executePendingAction() {
      if (!this.pendingAction) return
      
      this.$emit('trust-action', {
        cardId: this.cardData.id,
        action: this.pendingAction.type,
        trustChange: this.pendingAction.trustChange,
        description: this.pendingAction.description
      })
      
      this.closeConfirmModal()
    }
  }
}
</script>

<style scoped>
.trust-interaction-layer {
  padding: 20rpx;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16rpx;
  margin: 16rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
}

/* 主要操作 */
.main-actions {
  display: flex;
  gap: 12rpx;
  margin-bottom: 16rpx;
}

.action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8rpx;
  padding: 12rpx 20rpx;
  border: none;
  border-radius: 12rpx;
  font-size: 22rpx;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

.action-btn.primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
}

.action-btn.primary:hover {
  transform: translateY(-2rpx);
  box-shadow: 0 6rpx 16rpx rgba(102, 126, 234, 0.4);
}

.action-btn.primary.disabled {
  background: #ccc;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.action-btn.secondary {
  background: #f0f0f0;
  color: #666;
  border: 2rpx solid #e0e0e0;
}

.action-btn.secondary:hover {
  background: #e0e0e0;
}

.btn-icon {
  font-size: 18rpx;
}

.btn-text {
  font-size: 20rpx;
}

/* 快速操作 */
.quick-actions {
  display: flex;
  gap: 8rpx;
  margin-bottom: 16rpx;
  flex-wrap: wrap;
}

.quick-btn {
  display: flex;
  align-items: center;
  gap: 4rpx;
  padding: 8rpx 12rpx;
  background: #f8f9fa;
  border: 2rpx solid #e0e0e0;
  border-radius: 8rpx;
  font-size: 18rpx;
  cursor: pointer;
  transition: all 0.3s ease;
}

.quick-btn:hover {
  background: #e0e0e0;
  transform: translateY(-1rpx);
}

.quick-btn.active {
  background: #667eea;
  color: white;
  border-color: #667eea;
}

.quick-icon {
  font-size: 16rpx;
}

.quick-text {
  font-size: 16rpx;
}

/* 信任提示 */
.trust-tips {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.tip-item {
  display: flex;
  align-items: center;
  padding: 8rpx 12rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 8rpx;
}

.tip-icon {
  font-size: 16rpx;
  margin-right: 8rpx;
}

.tip-text {
  font-size: 16rpx;
  flex: 1;
}

/* 操作确认弹窗 */
.action-confirm-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  width: 90%;
  max-width: 500rpx;
  background: white;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 20rpx 40rpx rgba(0, 0, 0, 0.3);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.modal-title {
  font-size: 28rpx;
  font-weight: bold;
}

.close-btn {
  background: none;
  border: none;
  font-size: 32rpx;
  color: white;
  cursor: pointer;
  padding: 8rpx;
}

.modal-body {
  padding: 24rpx;
}

.confirm-text {
  font-size: 22rpx;
  color: #333;
  line-height: 1.4;
  margin-bottom: 16rpx;
  display: block;
}

.trust-impact {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12rpx 16rpx;
  background: #f8f9fa;
  border-radius: 8rpx;
}

.impact-label {
  font-size: 20rpx;
  color: #666;
}

.impact-value {
  font-size: 20rpx;
  font-weight: bold;
}

.impact-value.positive {
  color: #4caf50;
}

.impact-value.negative {
  color: #f44336;
}

.modal-footer {
  display: flex;
  gap: 12rpx;
  padding: 24rpx;
  background: #f8f9fa;
}

.confirm-btn {
  flex: 1;
  padding: 12rpx 20rpx;
  border: none;
  border-radius: 8rpx;
  font-size: 20rpx;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

.confirm-btn.cancel {
  background: #f0f0f0;
  color: #666;
}

.confirm-btn.cancel:hover {
  background: #e0e0e0;
}

.confirm-btn.confirm {
  background: #667eea;
  color: white;
}

.confirm-btn.confirm:hover {
  background: #5a6fd8;
}

/* 响应式设计 */
@media (max-width: 768rpx) {
  .trust-interaction-layer {
    margin: 12rpx;
    padding: 16rpx;
  }
  
  .main-actions {
    flex-direction: column;
  }
  
  .quick-actions {
    flex-direction: column;
  }
  
  .quick-btn {
    justify-content: center;
  }
}
</style>

